<script setup>
import { reactive } from 'vue';

const form = reactive({
  returnSubmit: 1,
  normalAbnormalEnd: 1,
  restoreContract: 1,
  newContractControl: false,
  advanceAutoRenew: false,
  renewWay: [1],
  autoMarkContractEnd: false
});

const handleCheckChange = (value, checked) => {
  if (checked) {
    if (!form.renewWay.includes(value)) {
      form.renewWay.push(value);
    }
  } else {
    form.renewWay = form.renewWay.filter(item => item !== value);
  }
};
</script>

<template>
  <div class="permission-control">
    <div class="tag-group">
      <el-tag type="info" size="small">管理版</el-tag>
    </div>

    <el-form :model="form" label-width="140px">
      <!-- 导入合同 -->
      <el-form-item label="导入合同" class="with-divider">
        <div class="content-wrapper">
          <p>默认仅机构负责人拥有导入合同权限，也可以指定其他人。</p>
          <div class="tag-group">
            <el-tag size="small">张小姐</el-tag>
            <el-tag size="small">邓硕</el-tag>
          </div>
        </div>
      </el-form-item>

      <!-- 导出合同 -->
      <el-form-item label="导出合同" class="with-divider">
        <div class="content-wrapper">
          <p>默认仅机构负责人拥有导出合同权限，也可以指定其他人。</p>
          <div class="tag-group">
            <el-tag size="small">张小姐</el-tag>
            <el-tag size="small">邓硕</el-tag>
          </div>
        </div>
      </el-form-item>

      <!-- 退回待提交 -->
      <el-form-item label="退回待提交" class="with-divider">
        <div class="content-wrapper">
          <el-radio-group v-model="form.returnSubmit" size="small">
            <el-radio :label="1" border>提交人可退回</el-radio>
            <el-radio :label="2" border>指定人员退回</el-radio>
          </el-radio-group>
          <p>可设置退回的操作权限</p>
        </div>
      </el-form-item>

      <!-- 批量删除合同 -->
      <el-form-item label="批量删除合同" class="with-divider">
        <div class="content-wrapper">
          <p>默认仅机构负责人拥有批量删除合同权限，也可以指定其他人。</p>
          <div class="tag-group">
            <el-tag size="small">张小姐</el-tag>
            <el-tag size="small">邓硕</el-tag>
          </div>
        </div>
      </el-form-item>

      <!-- 正常结束/异常终止 -->
      <el-form-item label="正常结束/异常终止" class="with-divider">
        <el-radio-group v-model="form.normalAbnormalEnd" size="small">
          <el-radio :label="1" border>可编辑合同即可操作</el-radio>
          <el-radio :label="2" border>指定人员操作</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 恢复合同 -->
      <el-form-item label="恢复合同" class="with-divider">
        <el-radio-group v-model="form.restoreContract" size="small">
          <el-radio :label="1" border>可编辑合同即可操作</el-radio>
          <el-radio :label="2" border>指定人员操作</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 新签合同控制 -->
      <el-form-item label="新签合同控制" class="with-divider">
        <div class="inline-content">
          <el-switch v-model="form.newContractControl" active-text="开启" inactive-text="关闭" size="small">
          </el-switch>
          <p>默认关闭，开启后只有指定人可以为已有合同的客户建立新合同，无权限的员工只能操作续签。</p>
        </div>
      </el-form-item>

      <!-- 提前自动延期 -->
      <el-form-item label="提前自动延期" class="with-divider">
        <div class="inline-content">
          <el-switch v-model="form.advanceAutoRenew" active-text="开启" inactive-text="关闭" size="small">
          </el-switch>
          <p>开启后可设置提前天数，设置后次日生效。</p>
        </div>
      </el-form-item>

      <!-- 续签/延期方式 -->
      <el-form-item label="续签/延期方式" class="with-divider">
        <div class="checkbox-group">
          <el-checkbox :checked="form.renewWay.includes(1)" @change="handleCheckChange(1, $event)" size="small">继续签合同</el-checkbox>
          <el-checkbox :checked="form.renewWay.includes(2)" @change="handleCheckChange(2, $event)" size="small">延长当前合同有效期</el-checkbox>
        </div>
      </el-form-item>

      <!-- 自动标记合同结束 - 修改这一部分 -->
      <el-form-item label="自动标记合同结束">
        <div class="switch-layout">
          <div class="switch-main">
            <el-switch 
              v-model="form.autoMarkContractEnd" 
              active-text="开启" 
              inactive-text="关闭" 
              size="small"
            />
          </div>
          <div class="switch-desc">
            <p>开启后符合要求的合同会自动标记结束，每日凌晨统一执行，设置后次日生效。</p>
            <p><strong>自动标记结束的条件：</strong></p>
            <p>以下条件必须都满足才会自动标记结束</p>
            <p>1、合同是执行中的状态，且已过期</p>
            <p>2、合同款项已收完，且收费期数超过</p>
            <p>3、合同已创建了续签合同，且续签合同为执行中、已结束、已终止的状态</p>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
.permission-control {
  background: white;
  padding: 10px;
  border-radius: 4px;
  min-height: 400px;

  .tag-group {
    margin-bottom: 10px;
  }

  .el-form-item {
    margin-bottom: 0;
    padding: 12px 0;
    display: flex;
    align-items: flex-start;

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .el-form-item__label {
      padding-top: 2px; /* 对齐内容顶部 */
      flex-basis: 140px; /* 固定标签宽度 */
      margin-right: 12px;
    }

    .el-form-item__content {
      flex: 1;
    }

    .el-tag {
      margin-right: 6px;
      vertical-align: middle;
    }

    p {
      margin: 0 0 0 8px;
      color: #606266;
      font-size: 13px;
      display: inline-block;
      vertical-align: middle;
    }

    .el-radio-group {
      display: inline-flex;
      gap: 15px;
      margin-bottom: 5px;
    }

    .el-radio {
      margin-right: 0;
    }

    // 同一行显示容器 - 修改自动标记合同结束的布局
    .inline-content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    // 新的自动标记合同结束布局
    .switch-layout {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      width: 100%;
    }

    .switch-main {
      flex-shrink: 0;
      // 确保开关区域固定宽度，不让它被压缩
    }

    // 内容包裹容器
    .content-wrapper {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    // 复选框组样式
    .checkbox-group {
      display: flex;
      gap: 15px;
      align-items: center;
    }

    .el-checkbox {
      margin: 0;
    }

    // 原来的开关描述文本样式 - 不再用于自动标记合同结束
    .switch-desc {
      display: inline-block;
      margin-left: 8px;
    }

    .switch-desc p {
      display: block;
      margin: 3px 0 0 0;
    }
  }

  // 行分隔线样式 - 最后一项不需要分隔线
  .with-divider {
    border-bottom: 1px dashed #e5e7eb;
  }
  
  // 为自动标记合同结束项移除分隔线
  .el-form-item:last-of-type {
    &.with-divider {
      border-bottom: none;
    }
  }
}
</style>